<template>
	<view>
		<view class="order-list">
			<view class="order-item" @click='goOrderDetails(item.id)' v-for="(item,index) in orderList" :key="index">
				<view class="order-date">{{item.createTime}}</view>
				<view class='item-info acea-row row-between row-top' v-for="(itemn,indexn) in item.childOrderList"
					:key="indexn">
					<view class='pictrue'>
						<u-image width="130rpx" height="130rpx" :src="itemn.image" :loading-icon="imgLoadBG"></u-image>
					</view>
					<view class='text acea-row row-between'>
						<view style="width: 306rpx;">
							<view class='name line2'>{{itemn.storeName}}</view>
							<view class='attr line1'>{{itemn.suk}}</view>
						</view>
						<view class='money'>
							<view>￥{{itemn.price}}</view>
							<view class="cartnum">x{{itemn.cartNum}}</view>
							<view class='fontcolor'>{{$t(`publicLang.${$options.filters['orderStatusFilter'](itemn.status)}`)}}</view>
						</view>
					</view>
				</view>
				<view class='totalPrice'>{{$t('order.childOrderListCount',{number:(item.childOrderList?item.childOrderList.length:0) || 0})}}
					<text class='money font-color'>￥{{item.payPrice}}</text>
				</view>
				<view class='bottom acea-row row-between row-middle'>
					<view class="addressee">
						{{$t('order.recipient')}}：{{item.realName}}
					</view>
					<!-- shippingType 1是快递订单 2是自提订单 -->
					<view class="acea-row">
						<view class='bnt confirmlBnt' v-if="item.payType=='offline' && item.status==0" @tap.stop='confirmOffine(item.id)'>{{$t('order.confirmReceipt')}}</view>
						<view class='bnt cancelBnt' v-if="item.status == 0" @tap.stop='cancelOrder(item.id)'>{{$t('order.cancelOrder')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['statusMap']),
		name: "order-goods",
		data() {
			return {
				imgLoadBG: ''
			};
		},
		props: {
			orderList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods: {
			cancelOrder(id) {
				this.$emit("cancelOrder",id)
			},
			goOrderDetails(id){
				this.$emit("goOrderDetails",id)
			},
			confirmOffine(id){
				this.$emit("confirmOffine",id)
			}
		}
	}
</script>

<style lang="scss">
	.order-list {

		overflow: hidden;

		.order-item {
			background-color: #FFFFFF;
			margin-bottom: 20rpx;

			.order-date {
				display: flex;
				align-items: center;
				height: 84rpx;
				margin: 0 30rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;
				color: #222;
			}

			.item-info {
				padding: 0 30rpx;
				margin-top: 22rpx;

				.text {
					width: 530rpx;
					font-size: 28rpx;
					color: #222;
					margin-top: 6rpx;

					.money {
						text-align: right;

						.fontcolor {
							font-size: 24rpx;
							font-weight: 400;
							color: #AF8A40;
						}
					}

					.name {
						color: #222;
					}

					.attr {
						width: 350rpx;
						font-size: 20rpx;
						color: #868686;
						margin-top: 7rpx;
					}
				}
			}

			.totalPrice {
				font-size: 24rpx;
				color: #2C3038;
				text-align: right;
				margin: 27rpx 0 0 30rpx;
				padding: 0 30rpx 30rpx 0;
				border-bottom: 1rpx solid #eee;

				.money {
					font-size: 28rpx;
					font-weight: bold;

					.cartnum {}
				}
			}

			.bottom {
				height: 107rpx;
				padding: 0 30rpx;

				.addressee {
					font-size: 26rpx;
					flex: 1;
				}

				.bnt {
					width: 142rpx;
					min-height: 56rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					// line-height: 56rpx;
					color: #222;
					border-radius: 4rpx;
					font-size: 24rpx;
					border: 1px solid #222;
				}
				.confirmlBnt{
					background-color: #000000;
					color: #FFFFFF;
				}
				.bnt~.bnt {
					margin-left: 17rpx;
				}

				.bg-color {
					color: #fff;
				}
			}
		}
	}
</style>
